<!DOCTYPE html>
<style>
#clipping-repaint-container {
    overflow: hidden;
    position: absolute;
    left: 49px;
    top: 49px;
    width: 348px;
    height: 348px;
    border: black 1px solid;
}

#non-repaint-container-compositing-layer {
    position: absolute;
    left: 49px;
    top: 49px;
    width: 248px;
    height: 248px;
    border: red 1px solid;
}

#painting-layer {
    position: absolute;
    left: 49px;
    top: 49px;
    width: 148px;
    height: 148px;
    border: green 1px solid;
}

#compositing-child1 {
    position: absolute;
    left: 61px;
    top: 61px;
    width: 24px;
    height: 24px;
    border: blue 1px solid;
}

#compositing-child2 {
    position: absolute;
    left: 49px;
    top: 49px;
    width: 48px;
    height: 48px;
    border: blue 1px solid;
}
</style>

<div id="clipping-repaint-container">
    <div id="non-repaint-container-compositing-layer">
        <div id="painting-layer">
            <div id="compositing-child1">
            </div>
            <div id="compositing-child2">
            </div>
        </div>
    </div>
</div>
